<template>
    <div class="flex flex-wrap pt-10 overflow-scroll  border-x-gray-200 border-solid"
        style="background-color: var(--boxborder);">
        <!-- 专辑信息 -->
        <div class="w-full flex mt-10  rounded-xl ">
            <img :src="list.album.picUrl" alt="封面" class="w-40 h-40 rounded-xl border-slate-600"
                style="border:2px rgba(22, 22, 22, 0.1) solid">
            <div class="ml-10 h-40">
                <p class="text-xl">{{ list.album.name }}</p>
                <p v-if="list.album.campany != null">{{ list.album.campany }}</p>
                <p>
                    <span class="text-gray-600">歌手:</span>
                    <span class="text-2xs font-medium leading-[4rem]" style="color: #888;cursor: pointer;"
                        @click="route.push(`/singerDetail/${list.album.artist.id}`)">{{ list.album.artist.name
                        }}</span>
                </p>
                <p><span class="text-md">发行时间: &nbsp;</span>{{ setYear(list.album.publishTime) }}</p>
            </div>
        </div>
        <!-- 专辑介绍 -->
        <div class="w-full mt-4" style="min-width: 200px;">
            <p class="font-bold leading-10">专辑介绍:</p>
            <p style="text-indent: 2em;" class="leading-8 text-gray-600" v-if="introduce.length == 0">
                暂无相关介绍
            </p>
            <div v-if="showMore && introduce.length > 0">
                <div v-for="item in introduce">
                    <p style="text-indent: 2em;" class="leading-8 text-gray-600">{{ item }}</p>
                </div>
                <input type="button" style="cursor: pointer;" value="收起" class="bg-white px-2 rounded-sm float-right"
                    @click="showMore = !showMore" v-if="introduce.length > 6" />
            </div>
            <div v-if="!showMore && introduce.length > 0">
                <div v-for="item in introduce.slice(0, 5)">
                    <p style="text-indent: 2em;" class="leading-8 text-gray-600">{{ item }}</p>
                </div>
                <p style="text-indent:2em;" v-if="introduce.length > 6">.......</p>
                <input type="button" value="展开" style="cursor: pointer;" class="bg-white px-2 rounded-sm float-right"
                    @click="showMore = !showMore" v-if="introduce.length > 6" />
            </div>
        </div>
        <!-- 歌曲列表 -->
        <div class="w-full mt-3 bg-gray-100 px-4 rounded-md" style="min-height: 150px;">
            <div class="h-8 border-b-[1px] border-gray-300">
                <p class="leading-8">
                    <span class="font-bold text-xl leading-8">歌曲列表<span class="ml-2 text-xs">共{{ list.songs.length
                    }}首</span></span>
                    <span class="float-right font-bold leading-8 " @click="pushMusic" style="cursor: pointer;">播放全部</span>
                </p>
            </div>
            <div class="w-full flex text-gray-500 text-sm h-8 mt-2">
                <p class="w-[33%]"><span>歌曲</span></p>
                <p class="w-[31%]">专辑</p>
                <p class="w-[30%]">歌手</p>
                <p class="w-[4%]">时长</p>
            </div>
            <div v-for="item, index in list.songs" class="text-sm h-8 text-gray-500 even:bg-gray-200">
                <PublicMusicItem :name="item.name" :id="item.id" :album="item.al" :singer="item.ar" :index="index"
                    :time="item.dt" @dblclick="PlayMusic(index)" />
            </div>
        </div>
        <div class="h-10  w-full">
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { setIntrduces, setYear } from '~~/hook/format';
import { usePlayStore } from '~~/store';
const router = useRoute()
const route = useRouter()
const store = usePlayStore()
const showMore = ref(false)
const { data } = await useAsyncData('albumInfo', (async () => await $fetch('/api/album/getInfo', { query: { id: router.params.id } })))
const list = data.value?.data
const introduce = setIntrduces(list.album.description);
const pushMusic = function () {
    let arr = []
    for (let i = 0; i < list.songs.length; i++) {
        let tempdata = {
            cover: list.songs[i].al.picUrl,
            name: list.songs[i].name,
            id: list.songs[i].id,
            album: list.songs[i].al.name,
            dt: list.songs[i].dt,
            singer: list.songs[i].ar[0].name
        }
        arr.push(tempdata)
    }
    store.$patch({
        currentMusicIndex: 0,
        playList: arr, playStatus: true,
        currentId: list.songs[0].id
    })
}
const PlayMusic = function (item) {
    let arr = []
    for (let i = 0; i < list.songs.length; i++) {
        let tempdata = {
            cover: list.songs[i].al.picUrl,
            name: list.songs[i].name,
            id: Number(list.songs[i].id),
            album: list.songs[i].al.name,
            dt: list.songs[i].dt,
            singer: list.songs[i].ar[0].name
        }
        arr.push(tempdata)
    }
    store.$patch({
        currentMusicIndex: item,
        playList: arr, playStatus: true,
        currentId: list.songs[item].id
    })
}
</script>
<style></style>